
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="applicable-device" content="mobile" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="msapplication-tap-highlight" content="no" />
	<title>重点工作提示</title>
	<link rel="stylesheet" href="static/css/vue/index.css">
	<script type="text/javascript">
		document.write("<link rel='stylesheet' type='text/css' href='static/css/metro.css?random="+Math.random()+"'/>");
	</script>
	<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css"/>
	<link rel="stylesheet" type="text/css" href="static/css/loading.css"/>
	<script type="text/javascript" src="static/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="static/js/echarts.min.js"></script>
	<script type="text/javascript" src="static/app/js/china.js"></script>
	<script type="text/javascript" src="static/js/dateUtil.js"></script>
	<script type="text/javascript">
		document.write("<script type='text/javascript' src='static/js/article.js?random="+Math.random()+"'></s"+"cript>");
	</script>

	<script src="static/js/vue/vue.js"></script>
	<script src="static/js/vue/index.js"></script>
	<script>
		+ function() {
			remLayout();

			function remLayout() {
				var w = document.documentElement.clientWidth;
				w = w > 768 ? 768 : w;
				w = w <= 320 ? 320 : w;
				document.documentElement.style.fontSize = w / 7.5 + 'px';
			}
			window.addEventListener('resize', function() {
				remLayout();
			}, false);
		}();
	</script>
	<style>
		html,body,.tab-pane,.section,.ul {
			height: 100%;
		}
		.tab-content {
			height: calc(100% - 2.7rem);
		}
		.ul {
			margin-top: -0.35rem;
		}
		.ul .li {
			height: 50%;
			padding-bottom: 0.42rem;
			margin-bottom: 0.4rem;
		}
		.sec_map {
			height: calc(100% - 2rem);
			overflow: scroll;
		}
	</style>
</head>


<body>
<div  id="loadDiv" class="bg">
	<div  class="tab_loading">
		加载中。。。
	</div>
</div>

<header>
	<div class="headers" id="headers">
		<div class="text_left" style="left:0.5rem;top: 0.8rem">
			<span>重点工作提示</span>
		</div>
		<div class="text_right">
			<span>填报日期</span>
			<!--     			<p id="endDate"></p>-->
			<div class="hhmm">
				<el-button icon="el-icon-caret-left"  @click="leftButtonClick()" id="leftButton"></el-button>
				<el-date-picker
						:clearable=false
						:editable=false
						v-model="dateValue"
						@change="dateChange"
						:picker-options="pickerOptions"
						type="date"
						placeholder="">
				</el-date-picker>
				<el-button icon="el-icon-caret-right"  @click="rightButtonClick()"  id="rightButton"></el-button>
			</div>
		</div>
<!--		<div  class="switchTab">-->
<!--			<ul class="nav nav-tabs" id="myTab">-->
<!--				<li class="active"><a href="javascript:loadArticle()" aria-controls="a" role="tab" data-toggle="tab">疫情防控</a></li>-->
<!--				<li><a href="javascript:loadArticle()" aria-controls="b" role="tab" data-toggle="tab">舆情宣传</a></li>-->
<!--				<li><a href="javascript:loadArticle()" aria-controls="c" role="tab" data-toggle="tab">责任督察</a></li>-->
<!--				<li><a href="javascript:loadArticle()" aria-controls="d" role="tab" data-toggle="tab">资金保障</a></li>-->
<!--			</ul>-->
<!--		</div>-->
		<!--     		<p class="Subheading">员工防疫动态 -->

		<!-- </p> -->
	</div>
</header>

<div class="tab-content">

	<div class="tab-pane active" id="a">

<!--		<section class="section">-->

			<ul class="ul">

				<li class="li" style="overflow:auto;">
					<div class="sec_top">
						<div class="top_one" style="text-align: center;height: 100%">
							<span id="titleLabA">运营组织疫情防控工作</span>
						</div>
					</div>
					<div class="sec_x" style="margin: 0.1rem auto;"></div>
					<div class="sec_two_header" style="margin-top: 0.1rem;">
						<img src="static/img/ico.png"/>
						<span>填报内容</span>
					</div>
					<div class="sec_x" style="margin-top: -0.1rem;"></div>
					<div class="sec_map" id="modelA">
					</div>
				</li>

				<li class="li" style="overflow:auto;">

					<div class="sec_top">
						<div class="top_one" style="text-align: center;height: 100%">
							<span id="titleLabB">舆情与宣传报道工作</span>
						</div>
					</div>

					<div class="sec_x" style="margin: 0.1rem auto;"></div>
					<div class="sec_two_header" style="margin-top: 0.1rem;">
						<img src="static/img/ico.png"/>
						<span>填报内容</span>
<!--						<div id="loadDiv1" class="tab_loading">-->
<!--							加载中。。。-->
<!--							&lt;!&ndash;					<i class="el-icon-loadings"></i>&ndash;&gt;-->
<!--						</div>-->
					</div>

					<div class="sec_x" style="margin-top: -0.1rem;"></div>
					<div class="sec_map" id="modelB">
					</div>
				</li>

				<li class="li" style="overflow:auto;">
					<div class="sec_top">
						<div class="top_one" style="text-align: center;height: 100%">
							<span id="titleLabC">责任落实督查情况</span>
						</div>
					</div>
					<div class="sec_x" style="margin: 0.1rem auto;"></div>
					<div class="sec_two_header" style="margin-top: 0.1rem;">
						<img src="static/img/ico.png"/>
						<span>填报内容</span>
					</div>
					<div class="sec_x" style="margin-top: -0.1rem;"></div>
					<div class="sec_map" id="modelC">
					</div>
				</li>

				<li class="li" style="overflow:auto;">
					<div class="sec_top">
						<div class="top_one" style="text-align: center;height: 100%">
							<span id="titleLabD">财务资金保障</span>
						</div>
					</div>
					<div class="sec_x" style="margin: 0.1rem auto;"></div>
					<div class="sec_two_header" style="margin-top: 0.1rem;">
						<img src="static/img/ico.png"/>
						<span>填报内容</span>
					</div>
					<div class="sec_x" style="margin-top: -0.1rem;"></div>
					<div class="sec_map" id="modelD">
					</div>
				</li>
			</ul>


<!--		</section>-->
	</div>
	<!--    <div class="tab-pane" id="b">-->
	<!--    <section>-->
	<!--    	<ul class="ul">-->
	<!--    		<li class="li" style="height:8.5rem;">-->
	<!--	    		<div class="sec_top">-->
	<!--    				<div class="top_one" style="text-align: center;">-->
	<!--&lt;!&ndash;    					<span id="amountOfNonlocalEpiboly">0</span>&ndash;&gt;-->
	<!--    					<span>责任落实督察情况</span>-->
	<!--    				</div>-->
	<!--    			</div>-->
	<!--    			<div class="sec_x" style="margin: 0.1rem auto;"></div>-->
	<!--    			<div class="sec_two_header" style="margin-top: 0.1rem;">-->
	<!--	            	<img src="static/img/ico.png"/>-->
	<!--	         		<span>填报内容</span>-->
	<!--	       		</div>-->
	<!--	        	<div class="sec_x" style="margin-top: -0.1rem;"></div>-->
	<!--    			<div class="sec_map" id="mapB"></div>-->
	<!--    		</li>-->
	<!--    	</ul>-->
	<!--    </section>-->
	<!--    </div>-->
	<!--    <div class="tab-pane" id="c">-->
	<!--	</div>-->
	<!--    <div class="tab-pane" id="d">-->
	<!--    </div>-->
</div>

</body>
<script type="text/javascript">
	// import { Loading } from 'element-ui';
	var currentPage=3;
	var vm = new Vue({
		el: '#headers',
		data: function() {
			var day = new Date();
			day.setTime(day.getTime());
			//如果是最近一天，右侧按钮不能点击
			if(day>new Date(new Date(new Date().toLocaleDateString()).getTime())){
				$("#rightButton").attr("disabled","disabled");
				$("#rightButton").css("color","grey");
			}
			return {
				pickerOptions: {
					disabledDate: (time) => {
						//限制查询时间不能大于昨天
						return time>day;
					}
				},
				dateValue: day,
				tabLoading: true
			}
		},
		mounted(){
			window.dateChange = this.dateChange; // 方法赋值给window调用
			window.conditionDate = this.dateValue;
			// console.log("window.date:"+window.conditionDate);
		},
		// created(){
		// 	console.log("初始化："+this.dateFormat("YYYY-mm-dd",this.dateValue));
		// 	this.getArticleList(this.dateFormat("YYYY-mm-dd",this.dateValue));
		// },
		methods: {
			leftButtonClick(){
				//时间控件减少一天
				this.dateValue = new Date((this.dateValue.getTime()-24*60*60*1000));
				this.dateChange();
			},
			rightButtonClick(){
				//时间控件增加一天
				this.dateValue = new Date((this.dateValue.getTime()+24*60*60*1000));
				this.dateChange();
			},
			dateChange(){
				if(this.dateValue>=new Date(new Date(new Date().toLocaleDateString()).getTime())){
					$("#rightButton").attr("disabled","disabled");
					$("#rightButton").css("color","grey");
					$("#rightButton").addClass("is-disabled");
				}else{
					$("#rightButton").attr("disabled",false);
					$("#rightButton").css("color","#8BC8FA");
					$("#rightButton").removeClass("is-disabled");
				}

				conditionDate = this.dateValue;
				loadArticle();
				// this.getArticleList(this.dateFormat("YYYY-mm-dd",this.dateValue));
				//判断当前所处页面
				// if(currentPage==1){
				// 	ownEmployee();
				// }else if(currentPage==2){
				// 	epibolyEmployee();
				// }else if(currentPage==3){
				// 	assetEpiboly();
				// }else if(currentPage==4){
				// 	assetShops();
				// }
			},
			// getArticleList(articleDate) {
			// 	var divA = document.getElementById("modelA");//运营组织疫情防控工作-articleType=3
			// 	var divB = document.getElementById("modelB");//舆情与宣传报道工作-articleType=4
			// 	var divC = document.getElementById("modelC");//责任落实督查情况-articleType=2
			// 	var divD = document.getElementById("modelD");//财务资金保障-articleType=1
			// 	divA.innerHTML = "<P style='text-align: center'>暂无数据</P>";
			// 	divB.innerHTML = "<P style='text-align: center'>暂无数据</P>";
			// 	divC.innerHTML = "<P style='text-align: center'>暂无数据</P>";
			// 	divD.innerHTML = "<P style='text-align: center'>暂无数据</P>";
			// 	var load = document.getElementById("loadDiv");
			// 	load.style.display = 'block';
			//
			// 	var data = {articleDate : articleDate}
			// 	$.ajax({
			// 		url : "article/getArticleList",
			// 		dataType : "json",
			// 		data : data,
			// 		success : function(data) {
			// 			load.style.display = 'none';
			// 			if (data != null && data != undefined && data.length>0)
			// 			{
			// 				console.log("========="+data[0].articleDate);
			// 				this.dateValue = new Date(new Date(new Date(data[0].articleDate).getTime()));
			// 				console.info("当前时间："+this.dateValue);
			// 				if(this.dateValue>=new Date(new Date(new Date().toLocaleDateString()).getTime())){
			// 					$("#rightButton").attr("disabled","disabled");
			// 					$("#rightButton").css("color","grey");
			// 					$("#rightButton").addClass("is-disabled");
			// 				}else{
			// 					$("#rightButton").attr("disabled",false);
			// 					$("#rightButton").css("color","#8BC8FA");
			// 					$("#rightButton").removeClass("is-disabled");
			// 				}
			// 				for (var i = 0; i<data.length;i++) {
			// 					if (data[i].articleType == 1)
			// 					{
			// 						divD.innerHTML = "";
			// 						var index = 0;
			// 						if (index!=0)//第一行不需要换行
			// 						{
			// 							var br = document.createElement("br");
			// 							divD.appendChild(br);
			// 						}
			// 						var p = document.createElement("p");
			// 						p.setAttribute("style","text-indent: 2em;line-height:20px;");
			// 						p.innerHTML = data[i].articleContent;
			// 						divD.appendChild(p);
			// 						index++;
			// 					}
			// 					if (data[i].articleType == 2)
			// 					{
			// 						divC.innerHTML = "";
			// 						var index = 0;
			// 						if (index!=0)//第一行不需要换行
			// 						{
			// 							var br = document.createElement("br");
			// 							divC.appendChild(br);
			// 						}
			// 						var p = document.createElement("p");
			// 						p.setAttribute("style","text-indent: 2em;line-height:20px;");
			// 						p.innerHTML = data[i].articleContent;
			// 						divC.appendChild(p);
			// 						index++;
			// 					}
			// 					if (data[i].articleType == 3)
			// 					{
			// 						divA.innerHTML = "";
			// 						var index = 0;
			// 						if (index!=0)//第一行不需要换行
			// 						{
			// 							var br = document.createElement("br");
			// 							divA.appendChild(br);
			// 						}
			// 						var p = document.createElement("p");
			// 						p.setAttribute("style","text-indent: 2em;line-height:20px;");
			// 						p.innerHTML = data[i].articleContent;
			// 						divA.appendChild(p);
			// 						index++;
			// 					}
			// 					if (data[i].articleType == 4)
			// 					{
			// 						divB.innerHTML = "";
			// 						var index = 0;
			// 						if (index!=0)//第一行不需要换行
			// 						{
			// 							var br = document.createElement("br");
			// 							divB.appendChild(br);
			// 						}
			// 						var p = document.createElement("p");
			// 						p.setAttribute("style","text-indent: 2em;line-height:20px;");
			// 						p.innerHTML = data[i].articleContent;
			// 						divB.appendChild(p);
			// 						index++;
			// 					}
			//
			// 				}
			//
			// 			}else
			// 			{
			// 				divA.innerHTML = "<P style='text-align: center'>暂无数据</P>";
			// 				divB.innerHTML = "<P style='text-align: center'>暂无数据</P>";
			// 				divC.innerHTML = "<P style='text-align: center'>暂无数据</P>";
			// 				divD.innerHTML = "<P style='text-align: center'>暂无数据</P>";
			// 			}
			//
			// 		}
			// 	});
			// },
			// dateFormat(fmt, date) {
			// 	let ret;
			// 	const opt = {
			// 		"Y+": date.getFullYear().toString(),        // 年
			// 		"m+": (date.getMonth() + 1).toString(),     // 月
			// 		"d+": date.getDate().toString(),            // 日
			// 		"H+": date.getHours().toString(),           // 时
			// 		"M+": date.getMinutes().toString(),         // 分
			// 		"S+": date.getSeconds().toString()          // 秒
			// 		// 有其他格式化字符需求可以继续添加，必须转化成字符串
			// 	};
			// 	for (let k in opt) {
			// 		ret = new RegExp("(" + k + ")").exec(fmt);
			// 		if (ret) {
			// 			fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
			// 		};
			// 	};
			// 	return fmt;
			// }

		}
	});
</script>
</html>

